<template>
    <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <el-form
              label-width="120px"
              style="margin-left: 120px; margin-top: 30px"
              :model="userInf"
              :rules="rules"
              ref="userSave"
            >
              <el-form-item label="姓名" prop="username">
                <el-input style="width: 300px" v-model="userInf.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password2">
                <el-input style="width: 300px" type="password" v-model="userInf.password2"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveUserDetailById">更新</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <el-row type="flex" justify="end">
              <el-tooltip content="打印个人信息">
                <router-link :to="`/employees/print/${userId}?type=personal`">
                <i class="el-icon-printer"></i>
                </router-link>
              </el-tooltip>
            </el-row>
            <user-info></user-info>
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <job-info></job-info>
          </el-tab-pane>
        </el-tabs>
      </el-card>
</template>

<script>
    import { getUserDetailById , saveUserDetailById} from "@/api/user"
    import JobInfo from "./component/job-info"
    import UserInfo from "./component/user-info"
    export default {
      components: {
        JobInfo,
        UserInfo
      },
        data() {
            return {
                userId: this.$route.params.id,
                userInf: {
                    username: "",
                    password2: "",
                },
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password2: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符' }
                        ]
                }
            }
        },
        created () {
            this.getUserDetailById()
        },
        methods:{
            async getUserDetailById () {
                this.userInf = await getUserDetailById(this.userId)
            },
            async saveUserDetailById () {
                try {
                    await this.$refs.userSave.validate();
                    await saveUserDetailById({
                        ...this.userInf,
                        password:this.userInf.password2
                    })
                    this.$message.success("保存成功");
                } catch (error){
                    this.$message.success(error);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>